<template>
		<view class="coupon-item">
			<view class="coupon-money">
				<!--<view class="nick" v-if="!types">{{item.seller_name}}使用</view>-->
				<view class="nick" :style="{'color': item.status == 0 ? '': '#ccc'}">{{item.name}}</view>
				<view class="layof" :style="{color:item.status == 0 ? theme: '#ccc'}">￥{{item.faceValue}}</view>
				<view class="end_time" :style="{'color': item.status == 0 ? '': '#ccc'}">{{item.endTime}}前使用</view>
				<view v-if="!types">
					<view class="demand">{{item.title}}</view>
				</view>
			</view>
			<view class="get-btn"
				  v-if="item.status == 0"
				  :style="{color:color, borderColor:color, background:solid}"
				  @tap="qrcode(item)"
			>选择使用
			</view>
			<navigator class="get-btn" v-if="!types"
					   :style="{color:color, borderColor:color, background:solid}" :url='item.url'
			>立即使用
			</navigator>
			<view class="icon" v-if="item.status == 1">
				<uni-iconfont class="icon-yishiyong" size="105" color="#ccc"></uni-iconfont>
			</view>
			<view class="icon" v-if="item.status == 2">
				<uni-iconfont class="icon-lecaiicon_hetong-yiguoqi" size="105" color="#EC5A48"></uni-iconfont>
			</view>
		</view>
</template>

<script>
import uniIconfont from '../uni-iconfont/index'

export default {
	components:{
        uniIconfont
	},
	data() {
		return {
		}
	},
	props:{
        item:{
			type: Object
		},
		types:{
			type: String,
			default: ''
		},
		theme:{
			type: String,
			default: '#ff9000'
		},
		solid:{
			type: String,
			default: '#ffffff'
		},
		color:{
			type: String,
			default: '#ff9000'
		},
		checkBox: {
			type: Boolean,
            default: false
		},
	},
	methods: {
        qrcode(item) {
            this.$emit('qrcode', item)
        },
        checkSelect(item) {
            this.$emit('checkSelect', item)
        },
	}
}
</script>

<style lang='scss'>
	$font-sm:26upx;
	$font-color-999:#999999;
	$bgcolor_white:#ffffff;
.coupon-item {
	width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; border:1px solid #eeeeee; position:relative;
	.coupon-money {
		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
		
		.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
		.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		
		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
	}
	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
.icon {
	margin-top: 20rpx;
}
.shar-item-ckb {
	width: 54rpx;
	height: 54rpx;
	line-height: 1.1;
	border-radius: 50%;
	position:absolute; top:30%; right:60upx;
	padding: 4rpx;
}
</style>